<template>
	<view class="bigBox">
		<view class="sectionTwo">
			<view class="frame" @click="toSearchPage()">
				<image class="searchP" src="/static/images/lunbo/search.png" widthFix />
				<input type="text" value="请输入内容" />
			</view>
			<view class="pag" @click="goToClassify()">
				国学 英语 全部分类
			</view>
		</view>
		<swiper autoplay interval="5000" circular class="lunbo">
			<swiper-item v-for="item in imgphoto" :key="item.id">
				<view class="item">
					<image :src="item.img" class="down-icon" widthFix></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="pictureBig">
			<view class="tagOne">国学</view>
			<view class="section">
				<view v-for="item in pictureBig" :key="item.id" class="sectionOne" @click="goToDetail(item.id)">
					<view class="fontOne">
						<image class="photoOne" :src="item.iamge"></image>
						<text>{{item.content}}</text>
					</view>
					<view>{{item.titleOne}}</view>
					<view class="titleTwo">{{item.titleTwo}}</view>
				</view>
			</view>
		</view>
		<view class="pictureBig">
			<view class="tagOne">英语</view>
			<view class="section">
				<view v-for="item in pictureBig" :key="item.id" class="sectionOne" @click="goToDetail(item.id)">
					<view class="fontOne">
						<image class="photoOne" :src="item.iamge"></image>
						<text>{{item.content}}</text>
					</view>
					<view>{{item.titleOne}}</view>
					<view class="titleTwo">{{item.titleTwo}}</view>
				</view>
			</view>
		</view>
		<view class="pictureBig">
			<view class="tagOne">逻辑</view>
			<view class="section">
				<view v-for="item in pictureBig" :key="item.id" class="sectionOne" @click="goToDetail(item.id)">
					<view class="fontOne">
						<image class="photoOne" :src="item.iamge"></image>
						<text>{{item.content}}</text>
					</view>
					<view>{{item.titleOne}}</view>
					<view class="titleTwo">{{item.titleTwo}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgphoto: [{
						id: 1,
						img: "/static/images/lunbo/1.jpg"
					},
					{
						id: 2,
						img: "/static/images/lunbo/2.jpg"
					},
					{
						id: 3,
						img: "/static/images/lunbo/3.jpg"
					},
					{
						id: 4,
						img: "/static/images/lunbo/4.jpg"
					},
				],
				pictureBig: [{
						id: 1,
						content: "共11课",
						iamge: "/static/images/lunbo/1.jpg",
						titleOne: "课程名称",
						titleTwo: "推荐语"
					},
					{
						id: 2,
						content: "共11课",
						iamge: "/static/images/lunbo/2.jpg",
						titleOne: "课程名称",
						titleTwo: "推荐语"
					}
				]
			}
		},
		methods: {
			goToClassify(){
				uni.navigateTo({
					url: '/uni_modules/my-earlyEducation/components/editDetail/editDetail'
				});
			},
			goToDetail(id){
				uni.navigateTo({
					url: '/uni_modules/my-earlyEducation/components/detailPage/detailPage?id='+id
				});
			},
			toSearchPage(){
				uni.navigateTo({
					url: '/uni_modules/my-earlyEducation/components/searchPage/searchPage'
				});
			}
		}
	}
</script>

<style scoped>
	.sectionTwo {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}
	.frame{
		display: flex;
		align-items: center;
	}
	.pag{
		width: 150px;
		height: 20px;
		line-height: 20px;
		background-color: #DDDDDD;
		border-radius: 10px;
		text-align: center;
	}
	input {
		border: 1px solid gray;
		border-radius: 15px;
		width: 140px;
		height: 20px;
		line-height: 20px;
	}

	.searchP {
		height: 30px;
		width: 30px;
	}

	.lunbo {
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
	}

	.down-icon {
		width: 100%;
	}

	.pictureBig {
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
	}

	.tagOne {
		color: #52c5ff;
	}

	.section {
		display: flex;
		width: 100%;
		margin-top: 10px;
	}

	.sectionOne {
		width: 50%;
	}

	.fontOne {
		position: relative;
	}

	text {
		/* z-index: 2; */
		font-size: 12px;
		position: absolute;
		bottom: 2px;
		right: 74px;
	}

	.photoOne {
		width: 100%;
		height: 100px;
	}

	.titleTwo {
		color: grey;
	}
</style>
